<template>
    <div class="main_container">
        <el-row :gutter="16" class="mb8">
            <el-col :span="1.5">
                <el-button
                class="btn_primary_color"
                icon="el-icon-plus"
                size="small"
                @click="handleAdd"
                >新增</el-button>
            </el-col>
        </el-row>

         <el-table border :data="unitLists" style="margin-top: 15px;">
            <el-table-column label="序号" width="100" align="center" prop="index" />
            <el-table-column label="单位名称" align="center" prop="name" />
            <el-table-column label="操作" width="200" align="left" class-name="small-padding fixed-width">
                <template slot-scope="scope">
                    <el-button
                        size="mini"
                        type="text"
                        @click="handleEdit(scope.row)"
                        style="font-weight: bold;margin-right: 10px;"
                    >编辑</el-button>
                    <el-button
                        size="mini"
                        type="text"
                        @click="handleRemove(scope.row)"
                        style="font-weight: bold;"
                    >删除</el-button>
                </template>
            </el-table-column>
        </el-table>
        <!-- <el-pagination
            v-show="total>0"
            background
            style="padding: 32px 16px;background: #fff;text-align: right;"
            @size-change="getUnits"
            @current-change="getUnits"
            :current-page.sync="pageParam.page"
            :page-size="pageParam.num"
            layout="total, prev, pager, next, jumper"
            :total="total">
        </el-pagination> -->

        <el-dialog
            :title="unitEditTitle"
            :visible.sync="showUnitAdd"
            width="30%"
            :close-on-click-modal="false"
            append-to-body
            center>
            <div style="padding-left: 20px;">
                <el-form :model="addForm" label-width="auto" ref="unitForm" :rules="rules">
                    <el-form-item label="单位名称:" prop="name">
                        <el-input style="width: 240px;" maxlength="100" v-model="addForm.name" placeholder="请输入" clearable />
                    </el-form-item>
                </el-form>
            </div>
            <span slot="footer" class="dialog-footer">
                <el-button size="small" @click="showUnitAdd=false">取 消</el-button>
                <el-button size="small" class="btn_primary_color" @click="addUnitCommit">确 定</el-button>
            </span>
        </el-dialog>
    </div>
</template>
<script>
import { getUnitList, addUnit, editUnit, removeUnit } from '@/api/product';

export default {
    name: 'units',
    data() {
        return {
            showUnitAdd: false,
            unitEditTitle: '',
            corp_id: '',
            editId: null,
            pageParam: {
                page: 1,
                num: 10
            },
            total: 0,
            unitLists: [],
            addForm: {
                name: '',
                id: '',
                corp: ''
            },
            rules:{
                name: [
                    { required: true, message: "请输入单位名称", trigger: "blur" },
                ],
            }
        }
    },
    created() {
        this.corp_id = this.$store.state.corpId
        this.addForm.corp = this.corp_id
        this.getUnits()
    },
    methods: {
        // 角色列表
        getUnits() {
            // let params = Object.assign({}, {corp: this.corp_id}, this.pageParam)
            getUnitList({corp: this.corp_id}).then(res => {
                this.unitLists = res.data.data.unit_list.filter((item, index) => {
                    item.index = index+1
                    return item
                })
                // this.total = this.unitLists.length
            })
        },
        // 新增
        handleAdd() {
            this.addForm.id = ''
            this.addForm.name = ''
            this.unitEditTitle = '新增单位'
            this.showUnitAdd = true
        },
        // 编辑
        handleEdit(item) {
            this.addForm.id = item.id
            this.addForm.name = item.name
            this.unitEditTitle = '编辑单位'
            this.showUnitAdd = true
        },
        addUnitCommit() {
            var that = this
            that.$refs['unitForm'].validate(valid => {
                if(!valid) return

                let temp = null
                if (that.addForm.id) {
                    temp = editUnit(that.addForm.id, that.addForm)
                }else{
                    temp = addUnit(that.addForm)
                }
                temp.then(res => {
                    if (res.code == 200){
                        that.addForm.name = ''
                        that.addForm.id = ''
                        that.getUnits()
                        that.showUnitAdd = false
                        that.$message({
                            message: '操作成功',
                            type: 'success'
                        })
                    }
                })
            })
        },
        // 删除
        handleRemove(item) {
            let that = this
            this.$confirm('您确定要删除该单位吗?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                removeUnit(item.id, {
                    corp: that.corp_id
                }).then(res => {
                    if (res.code == 200){
                        that.getUnits()
                        that.$message({
                            message: '操作成功',
                            type: 'success'
                        })
					}
                })
            }).catch(() => {        
            });
        },
    }
}
</script>

<style lang="less" scoped>
    @import '../../../style/mixin.less';

</style>

